<script setup lang="ts">
import { ref, onMounted, watch } from 'vue' 
import type { Category } from '../../../model' 
import { getCategoryList } from '../../../api' //当前分类编号
const params = defineProps(["id"])
//当前分类数据对象
const category = ref<Category>()
//获得当前分类
async function getCategory(){
const res = await getCategoryList()
category.value = res.data.data.filter((value:Category)=>value.id==params.id)[0]
}
//页面组件加载完成
onMounted(()=>{
getCategory()
})
//侦听 params 参数变化
watch(params,()=>{
getCategory()
})
</script>
<template>
  <section>
    <div><RouterLink to="/">首页</RouterLink> &raquo; {{ category?.name }}</div>
  </section>
</template>
<style scoped>
section {
  background-color: #f5f5f5;
}
section > div {
  color: #666666;
  width: 1200px;
  height: 70px;
  line-height: 70px;
  margin: 0px auto;
}
section a {
  color: #333333;
  text-decoration: none;
}
section a:hover {
  color: #4799f6;
}
</style>
